<template>
  <div class="index">
    <heads :title="$route.params.id ? '编辑地址' : '添加新地址'" :LeftArrow="true"></heads>
    <div class="main-content">
      <!-- 地址 -->

      <van-cell title="回收地址信息" class="cell-adress" icon="location-o">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #icon>
          <img src="@/assets/images/icon-adress.png" alt />
        </template>
      </van-cell>
      <van-address-edit
        :area-list="areaList"
        :show-delete="$route.query.id ? true : false"
        show-set-default
        :is-saving="isSave"
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        :area-placeholder="addressInfo.province ? (addressInfo.province+addressInfo.city+addressInfo.county) : '选择省/市/区'"
        :address-info="addressInfo"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
      >
        <!-- <slot name="default">1212</slot> -->
      </van-address-edit>

      <!-- end -->
      <!-- button -->
    </div>
    <!-- end -->
  </div>
</template>

<script>
import Mock from "mockjs";
import Area from "@/js/json/area.js";
import { Toast  } from "vant";
export default {
  components: {
    heads: resolve => require(["@/components/common/heads"], resolve)
  },
  data() {
    return {
      areaList: Area,
      isSave: false,
      searchResult: [],
      addressInfo: {
        name: "",
        areaCode: ""
      }
    };
  },
  watch: {},

  methods: {

    onSave(content) {
      this.save(content);
    },
    onDelete(content) {
      console.log(content);
      this.del();
    },
    onChangeDetail(val) {
      console.log("sss");
      // if (val) {
      //   this.searchResult = [
      //     {
      //       name: '黄龙万科中心',
      //       address: '杭州市西湖区',
      //     },
      //   ];
      // } else {
      //   this.searchResult = [];
      // }
    },
    //删除
    del() {
      let _this = this;
      this.$ajax
        .post(`${this.$baseUrl}/user/delAddress`, {
          id: this.$route.query.id
        })
        .then(function(res) {
          if (res.data.code == 200) {
            _this.$router.go(-1);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //保存 / 编辑
    save(content) {
      let _this = this;
      const params = {
        id: this.$route.query.id ? this.$route.query.id : "",
        name: content.name,
        phone: content.tel,
        province: content.province,
        city: content.city,
        town: content.county,
        desc: content.addressDetail,
        area_code: content.areaCode
      };

      this.$ajax
        .post(
          `${this.$baseUrl}${
            this.$route.query.id ? "/user/updateAddress" : "/user/addAddress"
          }`,
          params
        )
        .then(function(res) {
          if (res.data.code == 200) {
            Toast(_this.$route.query.id ? "修改地址成功!" : "添加地址成功!");
            setTimeout(() => {
              if (_this.$route.query.page === "send") {
                _this.$router.push({
                  path: "/adressList",
                  query: {
                    page: "send"
                  }
                });
                return;
              }
              _this.$router.push({ path: "/adressList" });
            }, 2000);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //获取地址信息
    getDetail() {
      let data = JSON.parse(this.$route.query.options);
      this.addressInfo = {
        name: data.name,
        tel: data.phone,
        areaCode: data.area_code,
        province: data.province,
        city: data.city,
        county: data.town,
        addressDetail: data.desc,
        isDefault: data.default === 1 ? true : false
      };
      console.log(this.addressInfo);
    }
  },
  created() {
    if (this.$route.query.id) {
      this.getDetail();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
/deep/ .main-content {
  margin-top: 0;
  padding-bottom: 0;
  min-height: 92.8vh;
  padding: 0.3rem;
  box-sizing: border-box;
  .van-switch--on {
    background-color: #34ad2a;
  }
  .cell-adress {
    font-size: 0.3rem;
    color: #1c1c1c;
    line-height: normal;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    border-top-left-radius: 0.1rem;
    border-top-right-radius: 0.1rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    &:after {
      display: none;
    }
    .van-cell__title {
      font-size: 0.3rem;
    }
    img {
      width: 0.42rem;
      height: 0.42rem;
      margin-right: 0.3rem;
    }
  }
  .van-cell__title {
    text-align: left;
  }
  .van-address-edit {
    padding: 0;
    .van-address-edit__fields {
      border-radius: 0.1rem;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    .van-address-edit__default {
      &:after {
        display: none;
      }
    }
    .van-cell {
      align-items: center;

      &.van-address-edit-detail {
        .van-field {
          padding: 0;
          align-items: flex-start;
        }
      }
    }
    .van-field {
      .van-field__label {
        text-align: left;
        justify-content: flex-start;
        font-size: 0.3rem;
        color: #999;
        width: 75px;
      }
      .van-cell__value {
        color: #333;
        font-size: 0.3rem;
      }
      .van-field__body {
        // height: 100%;
      }
    }
    .van-address-edit__buttons {
      padding: 1.2rem 0;
      .van-button {
        margin-bottom: 0.4rem;
      }
      .van-button--danger {
        background-color: #34ad2a;
        border: 1px solid #34ad2a;
      }
      .van-button--default {
        background-color: #333;
        border: 1px solid #333;
        color: #fff;
      }
    }
  }
}
</style>
  